<template>
  <div class="container">
    <!-- 底部大区域 -->
    <el-card class="box-card">
      <!-- 新增试题按钮区域 -->
      <!-- 新增试题按钮 -->
      <div style="display:flex;justify-content:space-between;">
        <span style="color:pink;font-size:12px;"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="toAddNew"
          >新增试题</el-button
        >
      </div>
      <!-- /新增试题按钮区域 -->
      <!-- 第二部分 -->
      <el-form ref="questionsRef" :model="requestionsForm" label-width="80px">
        <!-- 第一行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="学科" prop="subject.value">
              <el-select
                placeholder="请选择"
                v-model="searchForm.subjectID"
                @change="handersubject"
              >
                <el-option
                  v-for="(item, index) in requestionsForm.subject"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="driectory.id">
              <el-select
                placeholder="请选择"
                v-model="requestionsForm.driectory.id"
              >
                <el-option
                  v-for="(item, id) in requestionsForm.driectory"
                  :key="id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags.id">
              <el-select placeholder="请选择" v-model="requestionsForm.tags.id">
                <el-option
                  v-for="(item, id) in requestionsForm.tags"
                  :key="id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="searchForm.keyword"
                placeholder="请输入关键字"
                label="ff"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- /第一行 -->
        <!-- 第二行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="question">
              <el-select
                placeholder="请选择"
                v-model="requestionsForm.question"
              >
                <el-option
                  v-for="(item, index) in question"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                placeholder="请选择"
                v-model="requestionsForm.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                placeholder="请选择"
                v-model="requestionsForm.direction"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creator">
              <el-input
                placeholder="请输入关键字"
                label="ff"
                v-model="requestionsForm.creator"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- /第二行 -->
        <!-- 第三行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                placeholder="请输入题目"
                label="ff"
                v-model="requestionsForm.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="short">
              <el-input
                placeholder="请输入企业名称"
                label="ff"
                v-model="requestionsForm.short"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-row>
                <el-col :span="12">
                  <el-select
                    placeholder="请选择"
                    v-model="requestionsForm.province"
                    @change="handleProvinces"
                  >
                    <el-option
                      v-for="item in province"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select
                    placeholder="请选择"
                    v-model="requestionsForm.city"
                  >
                    <el-option
                      v-for="item in city"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="warning" @click="resetForm">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- /第三行 -->
      </el-form>
      <!-- /第二部分 -->
      <!-- 第三部分 -->
      <el-alert class="el-alert_buttom" type="info" show-icon :closable="false"
        >数据一共{{ count }}条</el-alert
      >
      <!-- /第三部分 -->
      <!-- 第四部分 -->
      <el-table :data="allSubjectList" style="width: 100%" max-height="500">
        <el-table-column fixed prop="number" label="试题编号">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == '1'">单选</span>
            <span v-else-if="scope.row.questionType == '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="160">
          <template v-slot="scope">
            <span>{{ scope.row.addDate | parseTimeByString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              size="small"
              plain
              @click="getQuestionsDetail(scope.row)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              size="small"
              plain
              @click="toEditNew(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              plain
              @click="deleteQuestion(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              size="small"
              plain
              @click="toAddChoice(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /第四部分 -->
      <!-- 第五部分-分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="quertInfo.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="quertInfo.pagesize"
        layout="total,  prev, pager, next, sizes, jumper"
        :total="count"
        background
        class="pagination"
      >
      </el-pagination>
      <!-- /第五部分-分页 -->
    </el-card>
    <!-- /底部大区域 -->
    <!-- 试题预览对话框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
      <container-subject
        v-if="dialogVisible"
        :subject="subject"
      ></container-subject>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- /试题预览对话框 -->
  </div>
</template>

<script>
/* 学科 */
import { simple } from '@/api/hmmm/subjects'
/* 二级目录 */
import { list as directorysList } from '@/api/hmmm/directorys.js'
/* 标签 */
import { list as tagsList } from '@/api/hmmm/tags'
/* 试题类型,难度 */
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
/* 城市 */
import { provinces, citys } from '@/api/hmmm/citys.js'
/* 基础试题列表 */
import {
  list as getAllSubjectList,
  remove,
  choiceAdd
} from '@/api/hmmm/questions'
/* 引入试题预览对话框 */
import ContainerSubject from '../components/questions-preview'
import { mapMutations } from 'vuex'
export default {
  name: 'Container',
  data() {
    return {
      requestionsForm: {
        subject: [], // 学科
        driectory: [], // 目录
        tags: [], // 标签
        keyword: null, // 关键字
        question: [], // 试题类别
        difficulty: [], // 难度
        direction: [], // 方向
        creator: null, // 录入人
        remarks: null, // 题目备注
        short: null, // 企业简称
        province: [], // 省份
        city: [] // 城市
      },
      searchForm: {
        subjectID: '',
        keyword: ''
      },
      allSubjectList: [], // 基础题库
      count: 0, // 总条数
      quertInfo: {
        query: '', // 关键字
        page: 1, // 页码
        pagesize: 4 // 每一页的总条数
      },
      dialogVisible: false,
      subjectId: '',
      choiceState: 1
    }
  },
  components: {
    ContainerSubject
  },
  props: {},
  computed: {},
  watch: {},
  created() {
    /* 学科 */
    this.getSubjectsList()
    /* 试题类型 */
    this.question = questionType
    /* 难度 */
    this.difficulty = difficulty
    /* 方向 */
    this.direction = direction
    /* 省份 */
    this.province = provinces()
    /* 市 */
    this.city = citys
    /* 试题列表 */
    this.getAllList()
  },
  mounted() {},
  methods: {
    /* 获取学科数据 */
    async getSubjectsList() {
      try {
        const { data } = await simple()
        console.log(data)
        this.requestionsForm.subject = data
      } catch (err) {
        console.log(err)
      }
    },
    /* 给学科添加change事件 */
    async handersubject() {
      /* 二级目录 */
      const { data } = await directorysList()
      // console.log(data);
      this.requestionsForm.driectory = data.items
      /* 标签 */
      const { data: res } = await tagsList()
      // console.log(res);
      this.requestionsForm.tags = res.items
    },
    // 获取城市下面的区列表
    handleProvinces(e) {
      this.city = citys(e)
    },
    /* 点击新增试题 */
    toAddNew() {
      this.$router.push('/questions/new')
    },
    /* 清除功能 */
    resetForm() {
      this.$refs.questionsRef.resetFields()
      this.requestionsForm.city = null
      this.searchForm.subjectID=''
      this.getAllList()
    },
    /* 数据列表 */
    async getAllList() {
      try {
        const { data } = await getAllSubjectList(this.quertInfo)
        console.log(data)
        /* 总条数 */
        /* 遍历数组 */
        this.count = data.counts
        data.items.forEach(item => {
          item.choiceState = '1'
        })
        console.log(data.items)
        /* /遍历数组 */
        this.allSubjectList = data.items
      } catch (err) {
        console.log(err)
      }
    },
    /* 分页功能 */
    handleSizeChange(newSize) {
      this.quertInfo.pagesize = newSize
      this.getAllList()
    },
    handleCurrentChange(newPage) {
      this.quertInfo.page = newPage
      this.getAllList()
    },
    getQuestionsDetail(row) {
      this.dialogVisible = true
      this.subject = row
    },
    ...mapMutations(['editFlag']),
    /* 修改按钮 */
    toEditNew(row) {
      this.$router.push('/questions/new')
      this.editFlag({ data: row, flag: false })
    },
    /* 删除功能 */
    async deleteQuestion(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') return this.$message.info('取消了删除')
      /* 发送请求 */
      const { data } = await remove(row)
      if (data.success) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getAllList()
      } else {
        this.$message({
          type: 'success',
          message: '删除失败!'
        })
      }
    },
    /* 搜索功能 */
    async onSearch() {
      try {
        const { data } = await getAllSubjectList(this.searchForm)
        this.allSubjectList = data.items
        console.log(data)
        this.count = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    /* 加入精选题库 */
    async toAddChoice(row) {
      const confirmResult = await this.$confirm(
        '此操作将将该题目添加到精选, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') return this.$message.info('取消添加')
      /* 发送请求 */
      const { data } = await choiceAdd(row)
      console.log(data)
      this.$router.push('/questions/choice')
      if (data.success) {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.getAllList()
      } else {
        this.$message({
          type: 'success',
          message: '添加失败!'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.right {
  float: right;
}
.el-form {
  margin-top: 20px;
}
.el-alert_buttom {
  margin-bottom: 10px;
}
.pagination {
  float: right;
  margin: 10px 0;
}
</style>
